<template>
  <!--  点击控制界面右侧窗口展开和折叠-->
  <div :style="coll?'width: 300px;':'width: 0px;'"
       style="display:flex;text-align: center;align-items: center;justify-items: center;">
    <a href="javascript:void(0)" style="text-decoration: none">
      <div @click="coll=!coll" v-if="coll"
           style="height: 60px;width: 20px;background-color: #15a3fa;position: absolute;top:40%;right:300px;z-index: 999;padding-top: 20px">
        <el-icon style="font-size: 20px;font-weight: 600;color: white" class="el-icon-arrow-right"></el-icon>
      </div>
      <div @click="coll=!coll" v-else
           style="height: 60px;width: 20px;background-color: #15a3fa;position: absolute;top:40%;right: 0;z-index: 999;padding-top: 20px">
        <el-icon style="font-size: 20px;font-weight: 600;color: white" class="el-icon-arrow-left"></el-icon>
      </div>
    </a>
    <!--    显示当前预测结果图片-->
    <div style="display: flex; flex-direction: column;" v-if="coll">
      <el-image style="width: 300px; height: 300px;background-color: #d3dce6;"
                :src="url"
                :preview-src-list="srcList">
      </el-image>
      <el-image style="width: 300px; height: 300px;background-color: #d3dce6;"
                :src="url2"
                :preview-src-list="srcList">
      </el-image>
    </div>

  </div>
</template>

<script>
export default {
  name: "CollapseIcon",
  data() {
    return {
      coll: false,
      progressWidth: 0,
      intervalID: null,
      url: this.$config.historyPath + "oneHour.png",
      url2: this.$config.historyPath + "twoHour.png",
      srcList: [
        this.$config.historyPath + "oneHour.png",
        this.$config.historyPath + "twoHour.png",
      ]
    }
  },
  methods: {},
}
</script>

<style scoped>
.timeline {
  width: 100%;
  height: 4px;
  background-color: #f0f0f0;
  position: relative;
}

.progress {
  width: 0;
  height: 100%;
  background-color: #007bff;
  position: absolute;
  top: 0;
  left: 0;
  transition: width 1s linear;
}

.el-carousel__item {
  background-color: #d3dce6;
}

</style>